/*
 * @Description: 数据视图帮助函数
 * @Author: HuiSir<https://gitee.com/huisir001>
 * @Date: 2025-09-29 09:52:38
 * @LastEditTime: 2025-09-29 11:37:40
 */
import { h } from "vue";
import { ElTag, ElText, ElSwitch } from "element-plus";

/**
 * 标签VNode视图属性
 */
export interface TagProps extends Recordable {
  size?: "" | "small" | "default" | "large";
  type?: "primary" | "success" | "warning" | "info" | "danger";
  /**
   * Tag 的主题
   */
  effect?: "dark" | "light" | "plain";
  round?: boolean;
  /**
   * 是否有边框描边
   */
  hit?: boolean;
  class?: string;
  style?: string;
}

/**
 * 文本VNode视图属性
 */
export interface TextProps extends Recordable {
  size?: "" | "small" | "default" | "large";
  type?: "primary" | "success" | "warning" | "danger" | "info";
  /**
   * 显示省略号
   */
  truncated?: boolean;
  /**
   * 最大显示行数
   */
  lineClamp?: number | string;
  /**
   * 自定义元素标签，默认span
   */
  tag?: string;
  class?: string;
  style?: string;
}

/**
 * 开关VNode视图属性
 */
export interface SwitchProps extends Recordable {
  size?: "" | "large" | "default" | "small";
  /**
   * switch 状态为 on 时的值，默认为true
   */
  activeValue?: boolean | string | number;
  /**
   * switch 状态为 off 时的值，默认为false
   */
  inactiveValue?: boolean | string | number;
  /**
   * switch 状态为 on 时的文本
   */
  activeText?: string;
  /**
   * switch 状态为 off 时的文本
   */
  inactiveText?: string;
  /**
   * 文本是否显示在点内，这里默认为true
   */
  inlinePrompt?: boolean;
  /**
   * 状态发生变化时的回调函数
   */
  onChange?: (value: boolean | string | number) => void;
  class?: string;
  style?: string;
}

/**
 * 标签VNode视图（常用于表格单元格内容格式化）
 * @param label 标签文本
 * @param tagProps 标签属性
 * @returns 标签组件
 */
export function createTagVNode(label: string, props: TagProps = {}) {
  return h(
    ElTag,
    {
      size: "small",
      type: "primary",
      effect: "light",
      class: "mr-5",
      ...props,
    },
    () => label
  );
}

/**
 * 文本VNode视图（常用于表格单元格文字特殊样式格式化）
 * @param label 文本内容
 * @param props 文本属性
 * @returns 文本组件
 */
export function createTextVNode(label: string, props: TextProps = {}) {
  return h(ElText, { size: "default", type: "primary", ...props }, () => label);
}

/**
 * 开关VNode视图（常用于表格单元格开关状态格式化）
 * @param label 开关文本
 * @param props 开关属性
 * @returns 开关组件
 */
export function createSwitchVNode(
  value: SwitchProps["activeValue"],
  props: SwitchProps = {}
) {
  const activeValue = "activeValue" in props ? props.activeValue : true;
  const inactiveValue = "inactiveValue" in props ? props.inactiveValue : false;

  return h(ElSwitch, {
    activeValue,
    inactiveValue,
    activeText: "是",
    inactiveText: "否",
    inlinePrompt: true,
    modelValue: value,
    onChange: (newValue) => {
      console.log("switch 状态发生变化:", newValue);
      console.warn("请在 props 参数中实现 onChange 回调函数");
    },
    ...props,
  });
}
